<template>
    <div class="card" v-for="item in userList" :key="item.id">
        <div class="info" @click="AddressCard(item)">
            <div class="name">{{ item.addressList.name }}</div>
            <div class="tel">{{ item.addressList.phone }}</div>
        </div>
        <div v-for="address in item.addressList" :key="address.name" class="address_box">
            <div class="address_text" @click="AddressCard(null, address)">
                {{ address.name }} - {{ address.phone }} - {{ address.address_text }}
            </div>
        </div>
        <div v-if="item.addressList.length === 0" class="address_text">暂无地址信息</div>
    </div>
</template>

<script setup>
import { userListStore } from '../store/user.js'
import { useRouter } from 'vue-router';
import { useAddressCardStore } from '../store/address.js'

const store = userListStore()
const userList = store.userList
const storeaddress = useAddressCardStore()
const router = useRouter()

const AddressCard = (user, address) => {
    const data = user ? user : address;
    storeaddress.addAddress(data);
    router.go(-1);
}
</script>

<style lang="scss" scoped>
@import '../style/viriables.scss';

.card {
    margin: .18rem;
    padding: .18rem;
    background-color: $bgColor;
    border-radius: .04rem;
    font-size: .14rem;

    .info {
        display: flex;
        justify-content: space-between;
        margin-bottom: .08rem;
        color: $light-fontColor;

        div {
            flex: 1;
        }
    }

    .address_box {
        margin-bottom: .18rem;
    }
}
</style>